<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
    <div id="root">
        <!-- 使用ID-->
        <!--    <div :key="item.id" v-for="item in arr">-->
        <!--        <h3>《{{item.bookName}}》</h3>-->
        <!--        <p>作者：{{item.author}}</p>-->
        <!--        <hr/>-->
        <!--    </div>-->

        <!-- 使用下标 -->
        <div :key="index" v-for="(item,index) in arr">
            <h3>下标：{{index+1}}</h3>
            <h3>《{{item.bookName}}》</h3>
            <p>作者：{{item.author}}</p>
            <hr/>
        </div>
    </div>
</body>
<script>
    new Vue({
        el:"#root",
        data:{
            arr:[
                {
                    id:1,
                    bookName:"天龙八部",
                    author:"金庸"
                },{
                    id:2,
                    bookName: "一念永恒",
                    author:"耳根"
                }
            ]
        }
    })
</script>
</html>